<template>
  <view>
    <view class="wrapper u-p-b-50">
      <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;z-index: 10">
        <u-input v-model="keyWord"
                 :clearable="true"
                 confirm-type="search"
                 @confirm="search"
                 class="flex-1 fon4-24 pd_l_30 pd_r_30" :height="50" placeholder="请输入活动名称进行搜索"/>
        <view class="btn color-active" @click="search">搜索</view>
      </view>
      <view class="list_wrp u-p-l-30 u-p-r-30">
        <navigator :url="`/pages/index/act/index?id=${item.id}`" class="item_list u-m-b-36"
                   v-for="(item, index) in showList"
                   :key="index"
        >
          <view class="top">
            <image class="item_img" :src="item.listImage"></image>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
  import {request} from "../../../util/api";

  export default {
    name: "list",

    data() {
      return {
        keyWord: '',
        list: [],
        showList: []
      }
    },

    mounted() {
      this.getActList()
    },

    methods: {
      search() {

      },

      getActList() {
        request({
          url: '/system/wx/CompassActInfo/list',
          token: true,
          data: {
            pageNum: 1,
            pageSize: 999
          }
        }).then(res => {
          this.list = res.rows
          this.showList = this.list
        })
      },
    },

    watch: {
      keyWord(newVal) {
        this.showList = this.list.filter(item => item.actName.includes(newVal))
      }
    }
  }
</script>

<style scoped lang="scss">
  .search {
    background: rgb(249, 249, 249);
    padding-top: 20upx;
    padding-bottom: 20upx;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    .flex-1 {
      background: #fff;
      border-radius: 25upx;
      margin-right: 20upx;
    }
  }
  .item_list {
    .top {
      width: 100%;
      height: 350upx;
      .item_img {
        width: 100%;
        height:100%;
      }
    }
  }
  .list_wrp {
    padding-top: 104upx;
  }
</style>
